<template>
  <div class="pay-cash">
    <div class="price-box">
      <span class="unit">￥</span>
      <span class="price">{{orderDetail.price | formatPrice}}</span>
    </div>
    <div class="btn-group">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">立即付款</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "pay-cash",
  components: {},
  props: {
    orderId: {
      type: Number
    },
    oldStatus: {
      type: Number
    }
  },
  data() {
    return {
      orderDetail: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    submit() {
      if (this.orderDetail.status !== this.oldStatus) {
        this.$message.error("订单状态已更新，请刷新页面");
        return;
      }
      let status = 2;
      this.$api.order
        .changeOrderStatus({ orderId: this.orderId, status: status })
        .then(res => {
          this.$message.success("订单支付成功！");
          this.$emit("refreshDetail");
          this.close();
        });
    },
    close() {
      // 关闭表单弹框
      this.$emit("close");
    },
    getOrderDetail() {
      this.$api.order.getOrderDetail({ orderId: this.orderId }).then(res => {
        this.orderDetail = res.data.orderDetail;
      });
    }
  },
  created() {
    this.getOrderDetail();
  }
};
</script>

<style lang="scss" scoped>
.pay-cash {
  .price-box {
    color: red;
    text-align: center;
    .unit {
      font-size: 30px;
    }
    .price {
      font-size: 30px;
    }
  }
  .btn-group {
    text-align: center;
    margin-top: 30px;
  }
}
</style>